<template>
  <p>姓名：{{ name }}</p>
  <p>年龄：{{ age }}</p>
  <p>工作：{{ job.name }}</p>
  <p>薪资：{{ job.salary }}</p>
  <p>爱好：{{ hobby }}</p>
  <button @click="update">修改信息</button>

  <p>用户属性：{{ prop }}</p>

  <button @click="addAttr">添加一个属性</button>
  <button @click="delAttr">删除一个属性</button>
</template>

<script>

import {ref, reactive} from 'vue'

export default {
  name: "SetupDemo",
  setup() {

    const name = ref('小马奔腾')
    const age = ref(18)

    // reactive，代理数据对象，Proxy实现
    // 对象类型使用reactive，尽量不要使用ref，不然修改内容就得 xx.value=ooo
    const job = reactive({
      name: '开发工程师',
      salary: '30K'
    })

    // 修改数组
    const hobby = reactive(['吃饭', '睡觉', '打豆豆'])

    const update = () => {
      const r = Math.floor(100 * Math.random())
      name.value = '大飞哥' + r
      age.value = r

      // 修改工作信息
      job.name = '高级开发工程师'
      job.salary = r + 'K'

      // reactive包装的数据，可以使用下标修改数据
      hobby[2] = '凳矮矮'
    }

    // 使用reactive包装的数据，添加属性和删除属性，数据都会响应式
    // 存储用户属性
    const prop = reactive({
      key1: 'value1',
      key2: 'value2'
    })

    // 添加一个属性
    const addAttr = () => {
      prop.key3 = '新增属性3'
      prop.key4 = '新增属性4'
    }

    // 删除一个属性
    const delAttr = () => {
      delete prop.key4
    }

    return {
      name,
      age,
      job,
      hobby,
      update,
      prop,
      addAttr,
      delAttr
    }
  }
}
</script>

<style scoped>

</style>